/**
 * @description  券池审批
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { IconC } from '../../../components';

class contrastData extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {}

  changeNumber = (e) => {
    const num = Number(e)
      .toFixed(2)
      .replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
    return num;
  };

  // 展示表格
  showArea = () => {
    const {
      netValueM: { beginData, endData, PropTypes },
    } = this.props;

    return (
      <div className='texArea'>
        <Row>
          <Col span={11}>
            <div>
              <span>期初</span>
            </div>
            <div className='col_A'>
              <Row>
                <Col span={13} style={{ textAlign: 'right' }}>
                  <span>日期：</span>
                </Col>
                <Col span={11}>
                  <span>{`${beginData.date ? beginData.date : '--'}`}</span>
                </Col>
              </Row>
              {PropTypes == 'monetary_like_fund' ? (
                <Row>
                  <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                    <span>万份收益：</span>
                  </Col>
                  <Col span={11} style={{ marginTop: '10px' }}>
                    <span>{`${beginData.tenThousandYield ? beginData.tenThousandYield : '--'}`}</span>
                  </Col>
                </Row>
              ) : (
                <Row>
                  <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                    <span>单位净值：</span>
                  </Col>
                  <Col span={11} style={{ marginTop: '10px' }}>
                    <span>{`${beginData.netValue ? beginData.netValue : '--'}`}</span>
                  </Col>
                </Row>
              )}
              {PropTypes == 'monetary_like_fund' ? (
                <Row>
                  <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                    <span>七日年化收益率：</span>
                  </Col>
                  <Col span={11} style={{ marginTop: '10px' }}>
                    <span>{`${beginData.annualYield7d ? `${beginData.annualYield7d}%` : '--'}`}</span>
                  </Col>
                </Row>
              ) : (
                <Row>
                  <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                    <span>累计单位净值：</span>
                  </Col>
                  <Col span={11} style={{ marginTop: '10px' }}>
                    <span>{`${beginData.accuNetValue ? beginData.accuNetValue : '--'}`}</span>
                  </Col>
                </Row>
              )}
              <Row>
                <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                  <span>资产净值(元)：</span>
                </Col>
                <Col span={11} style={{ marginTop: '10px' }}>
                  <span>{`${beginData.netAssetValue ? this.changeNumber(beginData.netAssetValue) : '--'}`}</span>
                </Col>
              </Row>
              <Row>
                <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                  <span>资产份额：</span>
                </Col>
                <Col span={11} style={{ marginTop: '10px' }}>
                  <span>{`${beginData.assetUnit ? this.changeNumber(beginData.assetUnit) : '--'}`}</span>
                </Col>
              </Row>
            </div>
          </Col>
          <Col span={2} style={{ textAlign: 'center', marginTop: '95px' }}>
            <IconC type={'vsIcon'} style={{ width: '27px', height: '28px' }} />
          </Col>
          <Col span={11}>
            <div>
              <span>期末</span>
            </div>
            <div className='col_A'>
              <Row>
                <Col span={13} style={{ textAlign: 'right' }}>
                  <span>日期：</span>
                </Col>
                <Col span={11}>
                  <span>{`${endData.date ? endData.date : '--'}`}</span>
                </Col>
              </Row>
              {PropTypes == 'monetary_like_fund' ? (
                <Row>
                  <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                    <span>万份收益：</span>
                  </Col>
                  <Col span={11} style={{ marginTop: '10px' }}>
                    <span>{`${endData.tenThousandYield ? endData.tenThousandYield : '--'}`}</span>
                  </Col>
                </Row>
              ) : (
                <Row>
                  <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                    <span>单位净值：</span>
                  </Col>
                  <Col span={11} style={{ marginTop: '10px' }}>
                    <span>{`${endData.netValue ? endData.netValue : '--'}`}</span>
                  </Col>
                </Row>
              )}
              {PropTypes == 'monetary_like_fund' ? (
                <Row>
                  <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                    <span>七日年化收益率：</span>
                  </Col>
                  <Col span={11} style={{ marginTop: '10px' }}>
                    <span>{`${endData.annualYield7d ? `${endData.annualYield7d}%` : '--'}`}</span>
                  </Col>
                </Row>
              ) : (
                <Row>
                  <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                    <span>累计单位净值：</span>
                  </Col>
                  <Col span={11} style={{ marginTop: '10px' }}>
                    <span>{`${endData.accuNetValue ? endData.accuNetValue : '--'}`}</span>
                  </Col>
                </Row>
              )}
              <Row>
                <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                  <span>资产净值(元)：</span>
                </Col>
                <Col span={11} style={{ marginTop: '10px' }}>
                  <span>{`${endData.netAssetValue ? this.changeNumber(endData.netAssetValue) : '--'}`}</span>
                </Col>
              </Row>
              <Row>
                <Col span={13} style={{ textAlign: 'right', marginTop: '10px' }}>
                  <span>资产份额：</span>
                </Col>
                <Col span={11} style={{ marginTop: '10px' }}>
                  <span>{`${endData.assetUnit ? this.changeNumber(endData.assetUnit) : '--'}`}</span>
                </Col>
              </Row>
            </div>
          </Col>
        </Row>
        <div className='col_B'>
          {PropTypes !== 'monetary_like_fund' ? (
            <Row>
              <Col span={8} style={{ textAlign: 'center' }}>
                <div className='col_B_1'>
                  <IconC type={'value'} iconType={'original'} style={{ marginTop: '-20px' }} />
                  <div style={{ display: 'inline-block', marginTop: '13px', marginLeft: '10px', textAlign: 'left' }}>
                    <p>资产净值变化</p>
                    <p className='Bold_text'>{`${endData.netAssetValue && beginData.netAssetValue ? this.changeNumber(endData.netAssetValue - beginData.netAssetValue) : '--'}`}</p>
                  </div>
                </div>
              </Col>

              <Col span={8} style={{ textAlign: 'center' }}>
                <div>
                  <IconC type={'liabilityRatio'} style={{ width: '30px', height: '28px', marginTop: '-20px' }} />
                  <div style={{ display: 'inline-block', marginTop: '13px', marginLeft: '10px', textAlign: 'left' }}>
                    <p>资产份额变化</p>
                    <p className='Bold_text'>{`${endData.assetUnit && beginData.assetUnit ? this.changeNumber(endData.assetUnit - beginData.assetUnit) : '--'}`}</p>
                  </div>
                </div>
              </Col>
              <Col span={8} style={{ textAlign: 'center' }}>
                <div>
                  <IconC type={'share'} style={{ width: '30px', height: '28px', marginTop: '-20px' }} />
                  <div style={{ display: 'inline-block', marginTop: '13px', marginLeft: '10px', textAlign: 'left' }}>
                    <p>累计单位净值变化率</p>
                    <p className='Bold_text'>{`${
                      endData.accuNetValue && beginData.accuNetValue ? `${this.changeNumber((endData.accuNetValue / beginData.accuNetValue - 1) * 100)}%` : '--'
                    }`}</p>
                  </div>
                </div>
              </Col>
            </Row>
          ) : (
            <Row gutter={8}>
              <Col span={12} style={{ textAlign: 'center' }}>
                <div className='col_B_1'>
                  <IconC type={'value'} iconType={'original'} style={{ marginTop: '-20px' }} />
                  <div style={{ display: 'inline-block', marginTop: '13px', marginLeft: '10px', textAlign: 'left' }}>
                    <p>资产净值变化</p>
                    <p className='Bold_text'>{`${endData.netAssetValue && beginData.netAssetValue ? this.changeNumber(endData.netAssetValue - beginData.netAssetValue) : '--'}`}</p>
                  </div>
                </div>
              </Col>

              <Col span={12} style={{ textAlign: 'center' }}>
                <div>
                  <IconC type={'liabilityRatio'} style={{ width: '30px', height: '28px', marginTop: '-20px' }} />
                  <div style={{ display: 'inline-block', marginTop: '13px', marginLeft: '10px', textAlign: 'left' }}>
                    <p>资产份额变化</p>
                    <p className='Bold_text'>{`${endData.assetUnit && beginData.assetUnit ? this.changeNumber(endData.assetUnit - beginData.assetUnit) : '--'}`}</p>
                  </div>
                </div>
              </Col>
            </Row>
          )}
        </div>

        <Row />
      </div>
    );
  };

  render() {
    return <div>{this.showArea()}</div>;
  }
}
export default connect(({ netValueM }) => ({
  netValueM,
}))(contrastData);
